<template>  <!--该页面为从设备探索进入的历史探索测试记录页面-->
  <div>
    <el-breadcrumb separator="/"> <!--面包屑never-->
    <el-breadcrumb-item><i class="el-icon-s-home" style="margin-right: 15px;font-size: 16px"></i>调波配置</el-breadcrumb-item>
    </el-breadcrumb>
	  <div class="info">
      <el-card shadow="always" class="cardPosition">
        <el-row>
          <el-button type="text" class="global_add" :disabled="btnList.add" @click="dialogVisible = true" size="small" style="float:right; margin-right: 15px;margin-bottom: 5px;">+&nbsp;新增调波百分比</el-button>
        </el-row>
        <el-dialog
          title="新增调波百分比"
          :visible.sync="dialogVisible"
          width="450px"
          >
          <el-form  label-width="120px" :model="newWave" :rules="rules" ref="newWave"  size="small">
            <el-form-item label="调波百分比(%)" prop="conf_percent">
              <el-input placeholder="请输入调波百分比" v-model="newWave.conf_percent" style="width: 90%" clearable></el-input>
            </el-form-item>
            <!-- <el-alert
              style="margin-bottom: 15px"
              title="提示"
              type="warning"
              description="调波百分比输入格式示例：56,68,89">
            </el-alert> -->
            <div style="margin: 0 0 20px 30px; color: #ccc;">
              <div>提示：</div>
              <div>&nbsp;&nbsp;调波百分比输入格式为三个数字中间用英文逗号隔开</div>
              <div>&nbsp;&nbsp;例如：56,68,89</div>
            </div>
                <!-- <el-form-item>
                  <div style="float: right">
                    <el-button @click="cancel">取消</el-button>
                    <el-button type="primary" @click="submitForm('newWave')">保存</el-button>
                  </div>
                </el-form-item> -->
          </el-form> 
          <span slot="footer" class="dialog-footer">
                    <el-button class="textBtn" @click="cancel"  size="small">取消</el-button>
                    <el-button type="primary" @click="submitForm('newWave')"  size="small">保存</el-button>
                  </span>
        </el-dialog>
        <el-table stripe v-loading="dataLoading" :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" border style="width: 100%">
          <el-table-column type="index" label="#" :index = '(index) =>{return (index + 1) + (currentPage - 1) * pagesize}' width="70" align="center"></el-table-column>
          <el-table-column align="center" prop="conf_percent" label="调波百分比(%)" :span="8"></el-table-column>
          <el-table-column align="center" prop="if_active" label="激活状态" :span="8" >
            <template slot-scope="scope">
              <el-button :style="{'color':scope.row.if_active=='1'?'#6C59DD':'#909399'}" type="text" :disabled="btnList.active" @click="checkWave(scope.$index, scope.row)">{{scope.row.if_active==0?'激活':'已激活'}}</el-button>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作"  :span="8">
            <template slot-scope="scope">
              <el-button class="global_edit" @click="toEditWave(scope.$index, scope.row)" type="text" size="small" :disabled="btnList.edit" style="color:#6C59DD">编辑</el-button>
                
              <el-button class="global_delete" type="text" size="small" :disabled="btnList.delete" @click="toDeleteWave(scope.$index, scope.row)" style="color:#D9001B;">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination class="pagination" background :current-page.sync="currentPage" :hide-on-single-page="showPagination" :page-size="pagesize" layout="prev, pager, next" :total="tableData.length"></el-pagination>
      </el-card>
      <el-dialog
                  title="编辑调波百分比"
                  :visible.sync="Editdialog"
                  width="450px"
                  >
                  <el-form  label-width="120px" :model="editWave" :rules="rules" ref="editWave"  size="small">
                    <el-form-item label="调波百分比(%)" prop="conf_percent">
                      <el-input placeholder="请输入调波百分比" v-model="editWave.conf_percent" style="width: 90%" clearable></el-input>
                    </el-form-item>
                    <!-- <el-alert
                      style="margin-bottom: 15px"
                      title="提示"
                      type="warning"
                      description="调波百分比输入格式示例：56,68,89">
                    </el-alert> -->
                    <div style="margin: 0 0 20px 30px; color: #ccc; text-align: left;">
                      <div>提示：</div>
                      <div>&nbsp;&nbsp;调波百分比输入格式为三个数字中间用英文逗号隔开</div>
                      <div>&nbsp;&nbsp;例如：56,68,89</div>
                    </div>
                    <!-- <el-form-item>
                      <div style="float: right">
                        <el-button @click="Editdialog = false">取消</el-button>
                        <el-button type="primary" @click="submitEditForm('editWave')">保存</el-button>
                      </div>
                    </el-form-item> -->
                  </el-form> 
                  <span slot="footer" class="dialog-footer">
                    <el-button class="textBtn" @click="Editdialog = false"  size="small">取消</el-button>
                    <el-button type="primary" @click="submitEditForm('editWave')"  size="small">保存</el-button>
                  </span>
                </el-dialog>
    </div>
  </div>
</template>
<script>
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// 引入需要用到的第三方nodejs库，如日期计算等
// 需要先通过npm安装第三方组件包，然后在代码中使用
// npm install xxx :settings="chartSettings"
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
import moment from 'moment';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import roleBtn from '../../public/means'
export default {
	data() {
      var validateWave = (rule, value, callback) => {
      let reg = /^[0-9,]{1,10}$/
        if (!reg.test(value)) {
          callback(new Error('调波百分比输入不正确'));
        }
         callback()
 
      };
    
		return {
      dialogVisible: false,
      Editdialog:false,
      searchContent:'',
      showPagination: true,     //分页显示
      currentPage: 1,           //从第几页开始显示
      pagesize: 10,              //每页多少行数据
      dataLoading: false,
      menu_id: 11,
      btnList: {
        add: false,
        edit: false,
        delete: false,
        active: false
      },
      newWave:{
        conf_percent:'',
      },
      editWave:{
        conf_id:'',
        conf_percent:'',
        if_active:'',
      },
      rules:{
        conf_percent:[
          {required: true, message: '请输入调波百分比', trigger: 'blur' },
          {validator: validateWave, trigger: 'blur'}
        ],

      },
      tableData: [],
		};
	},
	methods: {
    submitForm(formName) {
      this.$refs.newWave.validate(valid => {
        console.log(valid);
        if(!valid) {
          return ;
        }
         this.$message.closeAll();
      let check = true;
      if(this.newWave.conf_percent.indexOf("，") !== -1)
        check = false;
      let conf_percentArr=this.newWave.conf_percent.split(',');
      for(let i in conf_percentArr){
        if(conf_percentArr[i] > 100)
          check = false;
      }
      let index = conf_percentArr.indexOf("");
      if ((new Set(conf_percentArr)).size != conf_percentArr.length) {
        check = false;
      }
      if(index !=-1||check == false ){
        this.$message({ message: '请输不同的小于100的数,并以英文逗号隔开！', type: 'error', duration: 3000 });
      }else{
        this.saveNewWave();
      }
      })
    },
    submitEditForm(formName){
      this.$refs.editWave.validate(valid => {
        console.log(valid);
        if(!valid) {
          return ;
        }
         this.$message.closeAll();
      let check = true;
      if(this.editWave.conf_percent.indexOf("，") !== -1)
        check = false;
      let conf_percentArr=this.editWave.conf_percent.split(',');
      for(let i in conf_percentArr){
        if(conf_percentArr[i] > 100)
          check = false;
      }
      let index = conf_percentArr.indexOf("");
     if ((new Set(conf_percentArr)).size != conf_percentArr.length) {
        check = false;
      }
      if(index !=-1||check == false ){
        this.$message({ message: '请输不同的小于100的数,并以英文逗号隔开！', type: 'error', duration: 3000 });
      }else{
        this.saveEditWave();
      }
        })
    },
    toEditWave(index,row){
      if(row.if_active == 0){
        console.info(row);
        this.Editdialog=true;
        this.editWave.conf_id=row.conf_id;
        this.editWave.conf_percent=row.conf_percent;
        this.editWave.if_active=row.if_active;
      }else{
        this.$message.closeAll();
        this.$message({
        showClose: true,
        message:'该调波百分比已经激活，无法编辑！',
        type: 'warning'
        })
      }
      
    },
    async getAllWave(){
      this.dataLoading = true;
      const ret = await this.$http.get("/configWave/getAllWave");
      this.tableData = ret.result;
      this.dataLoading = false;
    },
    checkWave(index,row){
      if(row.if_active == 0){
        this.$confirm('确定激活并关闭其他调波百分比？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(({ result }) => {
          if(!result){
            this.activeWave(row.conf_id);
          }
         }).catch(() => {
        });
      }
      
    },
    //关闭调波百分比接口
    async cancelWave(conf_id){
      let ret;
      const params = {
        conf_id: conf_id,
      }
      ret = await this.$http.post("/configWave/cancelWave",{params,});
      if(ret.code === 200){
        ret.message='关闭成功';
        this.$message({
          showClose: true,
          message: ret.message,
          type: 'success',
          duration: 1000
        });
      }else {
        this.$message({
          showClose: true,
          message: ret.message,
          type: 'error'
        });
      };
      this.getAllWave();
    },
    //启动调波百分比接口
    async activeWave(conf_id){
      let ret;
      const params = {
        conf_id: conf_id,
      }
      ret = await this.$http.post("/configWave/activeWave",{params,});
      if(ret.code === 200){
        ret.message='激活成功';
        this.$message({
          showClose: true,
          message: ret.message,
          type: 'success',
          duration: 1000
        });
      }else {
        this.$message({
          showClose: true,
          message: ret.message,
          type: 'error'
        });
      };
      this.getAllWave();
    },
    //删除调波百分比
    toDeleteWave(index,row){
      if(row.if_active==1){
        this.$message.closeAll();
        this.$message({
          showClose: true,
          message:'该调波百分比已经激活，无法删除！',
          type: 'warning'
      })
      }else{
        this.$confirm('确定删除该调波百分比,此操作不可撤销', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(({ result }) => {
          if(!result){
            this.deleteWave(row.conf_id);
          }
        }).catch(() => {
          });
      }
      
    },
    //删除调波百分比接口
    async deleteWave(conf_id){
      let ret;
      const params = {
        conf_id:conf_id
      }
      ret = await this.$http.delete("/configWave/deleteWave",{params,});
      if(ret.code === 200){
      this.$message({
          showClose: true,
          message: ret.message,
          type: 'success'
        });
      }
      this.getAllWave();
      
    },
    
    //修改
    async saveEditWave(){
      this.editWave.conf_percent = this.editWave.conf_percent.split(",");
      for (let i in this.editWave.conf_percent) {
        this.editWave.conf_percent[i] = parseInt(this.editWave.conf_percent[i]);
      }
      this.editWave.conf_percent.sort((x,y)=>{
        return x-y;
      });
      this.editWave.conf_percent = this.editWave.conf_percent.join(",");
      const params = {
        'conf_id': this.editWave.conf_id,
        'conf_percent': this.editWave.conf_percent,
        
      };
      const ret = await this.$http.post("/configWave/saveEditWave",params);
        if(ret.code === 200){
        this.$message({
          showClose: true,
          message: '修改成功',
          type: 'success'
        });
      }
      this.$refs['editWave'].resetFields();
      this.Editdialog = false;
      this.getAllWave();
},
    //新增调波百分比
    async saveNewWave(){
      
      this.newWave.conf_percent = this.newWave.conf_percent.split(",");
      for (let i in this.newWave.conf_percent) {
        this.newWave.conf_percent[i] = parseInt(this.newWave.conf_percent[i]);
      }
      this.newWave.conf_percent.sort((x,y)=>{
        return x-y;
      });
      this.newWave.conf_percent = this.newWave.conf_percent.join(",");
      const params = {
        conf_percent: this.newWave.conf_percent,
      };
      const ret = await this.$http.post("/configWave/saveNewWave",{params,});
        if(ret.code === 200){
        this.$message({
          showClose: true,
          message: '添加成功',
          type: 'success'
        });
      }
      
      this.$refs['newWave'].resetFields();
      this.dialogVisible = false;
      this.getAllWave();
    },
    cancel() {
      this.$refs.newWave.resetFields()
      this.dialogVisible = false
    }
  },
	mounted() {
    this.getAllWave();
	},
  async created() {
    const role_id = JSON.parse(sessionStorage.getItem('userInfo')).role_id;
      if(role_id){
      // 获取按钮权限状态
      let arr = await roleBtn.roleBtnList(role_id, this.menu_id)
      this.btnList = arr
    }
  }
};
</script>
<style lang="scss" scoped>
@import "./ConfigWave.scss";
</style>